<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="layout" content="wechat"/>
    <title>免费评房</title>
</head>

<body>
<header class="create-header">
    <ul class="creat-flowList flex-box">
        <li data-id="01" class="flex1 active">
            <span></span>

            <h3>小区信息</h3>
        </li>
        <li data-id="02" class="flex1">
            <span></span>

            <h3>房产信息</h3>
        </li>
        <li data-id="03" class="flex1">
            <span></span>

            <h3>极速询值</h3>
        </li>
    </ul>
</header>

<form resource="${this.leads}" action="wxCreate2Step4Save" id="wxCreate2Form3" method="post" class="wxCreate2Form3">

    <input type="hidden" name="openId" value="${this.leads.openId}"/>
    <input type="hidden" name="unitPrice" id="unitPrice" value=""/>
    <input type="hidden" name="status" id="status" value=""/>
    <input type="hidden" id="externalId" name="externalId" value=""/>

    <div class="bgcWhite wxCreate weui-cells weui-cells_form">

        <div class="weui-cell weui-cell_select weui-cell_select-after">
            <div class="weui-cell__hd"><label class="weui-label">所在城市</label></div>

            <div class="weui-cell__bd">
                <g:select class="weui-select" name="city" id="city" optionKey="id" optionValue="name"
                          from="${this.cityList}" value="${this.leads?.city?.id}" noSelection="['': '请选择']"/>

            </div>
        </div>

        <div class="weui-cell weui-cell_select weui-cell_select-after">
            <div class="weui-cell__hd"><label class="weui-label">所在区县</label></div>

            <div class="weui-cell__bd weui-cell_primary">
                <select class="weui-select" name="district" id="districtList">
                    <option value="">请选择</option>
                </select>
            </div>
        </div>

        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">房屋坐落</label></div>
            <input type="hidden" id="communityId" name="communityId" value="${params.communityId}" placeholder="输入小区名称或房产地址"/>
            <!-- <input class="communityId" type="text" id="communityId" name="communityId" value="380247005"/> -->

            <div class="weui-cell__bd weui-cell_primary">
                <g:textField class="weui-input" type="text" id="projectName" name="projectName"
                             value="${this.leads?.projectName}"/>
            </div>
        </div>

        <div class="weui-cell projectNameListDiv" style="display: none">
            <div class="weui-cell__hd"><label class="weui-label"></label></div>

            <div class="weui-cell__bd weui-cell_primary projectNameList">
            </div>

        </div>


        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">楼（幢）号</label></div>
            <input type="hidden" id="buildingId" name="buildingId" value=""/>
            <!-- <input type="text" id="buildingId" name="buildingId" value="380264227"/> -->
            <div class="weui-cell__bd weui-cell_primary">
                <g:textField class="weui-input" type="number" id="building" name="building"
                             value="${this.leads?.building}" placeholder="输入楼栋号"/>
            </div>

        </div>

        <div class="weui-cell weui-cell_select weui-cell_select-after buildingListDiv" style="display: none">
            <div class="weui-cell__hd"><label class="weui-label"></label></div>

            <div class="weui-cell__bd weui-cell_primary buildingList">
                <select class="weui-select" name="">

                </select>
            </div>

        </div>



    </div>
    <div class="bgcWhite wxCreate weui-cells weui-cells_form sepLine">
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">单元号</label></div>
            <input type="hidden" id="unitId" name="unitId" value=""/>
            <!-- <input type="text" id="unitId" name="unitId" value="380455759"/> -->

            <div class="weui-cell__bd weui-cell_primary">
                <g:textField class="weui-input" type="number" id="unit" name="unit" value="${this.leads?.unit}"
                             placeholder="如：5"/>
            </div>
        </div>

        <div class="weui-cell weui-cell_select weui-cell_select-after unitListDiv" style="display: none">
            <div class="weui-cell__hd"><label class="weui-label"></label></div>

            <div class="weui-cell__bd weui-cell_primary unitList">
                <select class="weui-select" name="">

                </select>
            </div>

        </div>

        <div class="weui-cell">
            <div class="weui-cell__hd"><label
                    class="weui-label">房号</label></div>

            <div class="weui-cell__bd weui-cell_primary">
                <g:textField class="weui-input" type="text" id="roomNumber" name="roomNumber"
                             value="${this.leads?.roomNumber}" placeholder="如：201"/>
            </div>
        </div>

        <div class="weui-cell weui-cell_select weui-cell_select-after houseListDiv" style="display: none">
            <div class="weui-cell__hd"><label class="weui-label"></label></div>

            <div class="weui-cell__bd weui-cell_primary houseList">
                <select class="weui-select" name="">

                </select>
            </div>

        </div>

        <div class="weui-cell">

            <div class="weui-cell__hd"><label class="weui-label">面积</label></div>

            <div class="weui-cell__bd weui-cell_primary">
                <g:field class="weui-input" type="number" name="area" id="area" value="${this.leads?.area}"
                         placeholder="如：110"/>
            </div>

            <div class="weui-cell__hd"><label class="weui-label" style="margin-right: 0">（m<sup>2</sup>）</label></div>
        </div>
    </div>
    <div class="bgcWhite wxCreate weui-cells weui-cells_form sepLine">
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">所在层</label></div>

            <div class="weui-cell__bd weui-cell_primary">
                <input id="floor" name="floor" class="weui-input" type="number" value="${this.leads?.floor}"
                       placeholder="自动带出">

            </div>
        </div>

        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">总楼层</label></div>

            <div class="weui-cell__bd weui-cell_primary">

                <input id="totalFloor" name="totalFloor" class="weui-input" type="number"
                       value="${this.leads?.totalFloor}" placeholder="自动带出">

            </div>
        </div>

    </div>

    <div class="bigBtn">
        <button type="button" class="linkBtn weui-btn weui-btn_plain_default" id="wxcreateStep3Btn">下一步</button>
    </div>
</form>

%{--提示信息和验证--}%
<div class="message-box">
    <div class="helpMsg hide"></div>
    <g:if test="${flash.message}">
        <div class="message" role="status">
            ${flash.message}
        </div>
    </g:if>
</div>

<g:javascript>
    $(function () {
        function getDistrict() {
            $.ajax({
                type: "POST",
                url: "/wechatOpportunity/wxGetDistrictByCity",
                data: {
                    city: $("#city").val(),
                },

                success: function (data) {
                    if (data.status == "success") {
                        var dataList = data.districtList;
                        $('#districtList').html("");
                        if (dataList.length > 0) {
                            var option = '<option value="">请选择</option>';
                            for (var i = 0; i < dataList.length; i++) {
                                option += '<option value="' + dataList[i] + '">' + dataList[i] + '</option>';
                            }
                            $("#districtList").append(option);

                        }


                    }
                },
                error: function () {
                    helpMessage("区县获取失败，请稍后重试");
                }
            });
        }

        function getProjectName() {
            $.ajax({
                type: "POST",
                url: "/wechatOpportunity/wxGetCommunityByDistrict",
                data: {
                    projectName: $("#projectName").val(),
                    city: $("#city").val(),
                    district: $("#district").val(),
                },

                success: function (data) {
                    if (data.status == "success") {
                        $(".projectNameList").html("");
                        var projectNameList = data.projectNameList;
                        $(".projectNameListDiv").attr("style", "display:block;");
                        var content = '<h4 class="colorRed">未找到对应的小区，点此直接提交！</h4>';

                        for (var i = 0; i < projectNameList.length; i++) {
                            content += '<div class="weui-media_box weui-media_text projectNameItem">';
                            content += '<h4 class="weui-media_title">' + projectNameList[i].communityName + '</h4>';
                            content += '<p class="weui-media_desc">' + projectNameList[i].address + '</p>';
                            content += '<span class="hide">' + projectNameList[i].communityId + '</span>';
                            content += '</div>'

                        }
                        $(".projectNameList").append(content);

                    }

                    else {
                        console.log("获取小区接口返回异常：" + data.errorMsg);
                    }
                },
                error: function () {
                    console.log("获取小区接口请求失败");
                }
            });
        }

        function getBuilding() {
            $.ajax({
                type: "POST",
                url: "/wechatOpportunity/wxGetBuildingByCommunity",
                data: {
                    cityId: $("#city").val(),
                    communityId: $("#communityId").val(),
                    building: $("#building").val(),
                },

                success: function (data) {
                    if (data.status == "success") {
                        var buildingList = data.buildingList;
                        if (buildingList.length > 0) {
                            $(".buildingListDiv").attr("style", "display:show;");
                        }
                        $(".buildingList select").html("");

                        var option = '<option value="">请选择楼号</option>';
                        for (var i = 0; i < buildingList.length; i++) {
                            option += '<option dataBuildingId="' + buildingList[i].buildingId + '"dataTotalFloor="' + buildingList[i].totalFloor + '"value="' + buildingList[i].buildingName + '">' + buildingList[i].buildingName + '</option>';
                        }
                        $(".buildingList select").append(option);
                    }
                    else {
                        console.log("获取楼栋接口返回异常：" + data.errorMsg);
                    }
                },
                error: function () {
                    console.log("获取楼栋接口请求失败");
                }
            });
        }

        function getUnit() {
            $.ajax({
                type: "POST",
                url: "/wechatOpportunity/wxGetUnitByBuilding",
                data: {
                    cityId: $("#city").val(),
                    communityId: $("#communityId").val(),
                    buildingId: $("#buildingId").val(),
                    unit: $("#unit").val(),
                },

                success: function (data) {
                    if (data.status == "success") {
                        var unitList = data.unitList;
                        if (unitList.length > 0) {
                            $(".unitListDiv").attr("style", "display:show;");
                        }
                        $(".unitList select").html("");

                        var option = '<option value="">请选择单元号</option>';
                        for (var i = 0; i < unitList.length; i++) {
                            option += '<option dataUnitId="' + unitList[i].unitId + '"dataTotalFloor="' + unitList[i].totalFloor + '"value="' + unitList[i].unitName + '">' + unitList[i].unitName + '</option>';
                        }
                        $(".unitList select").append(option);

                    }
                    else {
                        console.log("获取单元接口返回异常：" + data.errorMsg);
                    }
                },
                error: function () {
                    console.log("获取单元接口请求失败");
                }
            });
        }

        function getHouse() {
            $.ajax({
                type: "POST",
                url: "/wechatOpportunity/wxGetHouseByUnit",
                data: {
                    cityId: $("#city").val(),
                    buildingId: $("#buildingId").val(),
                    unitId: $("#unitId").val(),
                    house: $("#roomNumber").val(),
                },

                success: function (data) {
                    if (data.status == "success") {
                        var houseList = data.houseList;
                        if (houseList.length > 0) {
                            $(".houseListDiv").attr("style", "display:show;");
                        }
                        $(".houseList select").html("");

                        var option = '<option value="">请选择房号</option>';
                        for (var i = 0; i < houseList.length; i++) {
                            option += '<option dataFloor="' + houseList[i].floor + '"dataBuildingArea="' + houseList[i].buildingArea + '"dataTotalFloor="' + houseList[i].totalFloor + '"value="' + houseList[i].house + '">' + houseList[i].house + '</option>';
                        }
                        $(".houseList select").append(option);

                    }
                    else {
                        console.log("获取户接口返回异常：" + data.errorMsg);
                    }
                },
                error: function () {
                    console.log("获取户接口请求失败");
                }
            });
        }

        // 动态获取城区
        $("#city").change(function () {
            getDistrict();
        });

        // 动态获取小区
        $("#projectName").bind('input propertychange', function () {
            $("#communityId").val("");
            $(".projectNameListDiv").attr("style", "display:none;");
            getProjectName();
        });

        // 动态获取楼栋
        $(".projectNameList").delegate(" .projectNameItem", "click", function () {
            var housecell = $(this).children("h4").text().trim();
            $("#projectName").val(housecell);
            var communityId = $(this).children("span").text().trim();
            $("#communityId").val(communityId);
            $(".projectNameListDiv").attr("style", "display:none;");
            getBuilding();
        });
        $(".projectNameList").delegate(" h4", "click", function () {
            $(".projectNameListDiv").attr("style", "display:none;");
        });

        $("#building").bind('input propertychange', function () {
            $("#buildingId").val("");
            $("#totalFloor").val("");
            $(".buildingListDiv").attr("style", "display:none;");
            getBuilding();
        });

        //动态获取单元
        $(".buildingList").delegate("select", "change", function () {
            var selectOption = $(".buildingList select option:selected");
            $("#building").val(selectOption.val().trim());
            $("#buildingId").val(selectOption.attr("dataBuildingId").trim());
            $("#totalFloor").val(selectOption.attr("dataTotalFloor").trim());
            $(".buildingListDiv").attr("style", "display:none;");
            getUnit();
        });

        $("#unit").bind('input propertychange', function () {
            $("#unitId").val("");
            $("#totalFloor").val("");
            $(".unitListDiv").attr("style", "display:none;");
            getUnit();
        });

        //动态获取户
        $(".unitList").delegate("select", "change", function () {
            var selectOption = $(".unitList select option:selected");
            $("#unit").val(selectOption.val().trim());
            $("#unitId").val(selectOption.attr("dataUnitId").trim());
            $("#totalFloor").val(selectOption.attr("dataTotalFloor").trim());
            $(".unitListDiv").attr("style", "display:none;");
            getHouse();
        });
        $("#unit").focus(function () {
            $(".creat-flowList li:nth-child(2)").addClass("active");
        });
        $("#roomNumber").focus(function () {
            $(".creat-flowList li:nth-child(2)").addClass("active");
        });
        $("#area").focus(function () {
            $(".creat-flowList li:nth-child(2)").addClass("active");
        });
        $("#roomNumber").bind('input propertychange', function () {
            $("#floor").val("");
            $("#totalFloor").val("");
            $("#area").val("");
            $(".houseListDiv").attr("style", "display:none;");
            getHouse();
        });

        $(".houseList").delegate("select", "change", function () {
            var selectOption = $(".houseList select option:selected");
            $("#roomNumber").val(selectOption.val().trim());
            $("#floor").val(selectOption.attr("dataFloor").trim());
            $("#totalFloor").val(selectOption.attr("dataTotalFloor").trim());
            $("#area").val(selectOption.attr("dataBuildingArea").trim())
            $(".houseListDiv").attr("style", "display:none;");
        });

        // $("#appliedTotalPrice").val("");
        $("#building").val("");
        $("#unit").val("");
        $("#area").val("");
        // $("#orientation").val("");
        $("#wxcreateStep3Btn").click(function () {

            // 所属城市
            var city = $("#city").val().trim();
            if (!city) {
                helpMessage("请输入所在城市");
                return;
            }

            // 所在区县
            var district = $("#districtList").val().trim();
            if (!district) {
                helpMessage("请输入所在区县");
                return;
            }

            // 所在小区
            var projectName = $("#projectName").val().trim();
            if (!projectName) {
                helpMessage("请输入所在小区");
                return;
            }

            // 楼栋信息
            var building = $("#building").val().trim();
            if (!building) {
                helpMessage("请输入楼栋信息");
                return;
            }

            // 单元信息
            var unit = $("#unit").val().trim();
            if (!unit) {
                $("#unit").val(0);
                unit = 0;
            }

            // 楼层信息
            var floor = $("#floor").val().trim();
            var totalFloor = $("#totalFloor").val().trim();
            if (!floor) {
                helpMessage("请输入所在楼层");
                return;
            }
            if (!(/^-?[1-9]\d*$/.test(floor))) {
                helpMessage("请输入正确的所在楼层");
                return;
            }
            if (!totalFloor) {
                helpMessage("请输入总楼层");
                return;
            }
            if (!(/^-?[1-9]\d*$/.test(totalFloor))) {
                helpMessage("请输入正确的总楼层");
                return;
            }
            if (parseInt(floor) > parseInt(totalFloor)) {
                helpMessage("所在楼层必须小于等于总楼层");
                return;
            }

            // 户号
            var roomNumber = $("#roomNumber").val().trim();
            if (!roomNumber) {
                helpMessage("请输入户号");
                return;
            }

            // 面积
            var area = $("#area").val().trim();
            if (!area) {
                helpMessage("请输入住宅面积");
                return;
            }
            if (area <= 0) {
                helpMessage("住宅面积必须大于0");
                return;
            }


            // 询价并提交表单
            $('#wxcreateStep3Btn').addClass("btn_disabled").attr('disabled', 'disabled');
            $.ajax({
                type: "POST",
                url: "/leads/wxQueryPrice",
                data: {
                    city: city,
                    district: district,
                    projectName: projectName,
                    building: building,
                    unit: unit,
                    floor: floor,
                    roomNumber: roomNumber,
                    totalFloor: totalFloor,
                    area: area

                },
                beforeSend: function () {
                    $(".helpMsg").html("");
                    var html = '<h4 class="msg1">评房信息已提交</h4>' + '<h5 class="msg2">系统正在评估中，请稍等 <span class="colorRed">15-30s</span>，返回评房结果</h5>';
                    $(html).appendTo($(".helpMsg"));
                    $(".helpMsg").fadeIn(200);
                },
                success: function (data) {
                    if (data.status == "success") {
                        var price = data.price
                        $("#unitPrice").val(price["unitprice"]);
                        $("#status").val(data["collateralStatus"]);
                        $("#externalId").val(price["evaluateCode"]);
                        $("#wxCreate2Form3").submit();
                    } else {
                        helpMessage(data.errorMsg);
                        return;
                    }
                }
            });
        });

        setTimeout(function () {
            $(".message").fadeOut(200);
        }, 2000);

        function helpMessage(message) {
            $(".helpMsg").text(message).fadeIn(200);
            setTimeout(function () {
                $(".helpMsg").fadeOut(200);
            }, 2000);
        }

    });
</g:javascript>
</body>
</html>
